import { StyleSheet } from 'react-native'

const flexStyle = StyleSheet.create({
  /* 子元素-平均分栏 */
  flex1: {
    flex: 1
  },
  /* 父元素-横向排列（主轴） */
  flexH: {
    flexDirection: 'row',
    display: 'flex'
  },
  /* 父元素-横向排列（主轴）（从右到左） */
  flexHr: {
    flexDirection: 'row-reverse'
  },
  /* 父元素-水平向行开始位置对齐（主轴是横向才生效） */
  flexHs: {
    justifyContent: 'flex-start'
  },
  /* 父元素-水平居中（主轴是横向才生效） */
  flexHc: {
    justifyContent: 'center'
  },
  /* 父元素-水平向行结束位置对齐（主轴是横向才生效） */
  flexHe: {
    justifyContent: 'flex-end'
  },
  /* 父元素-水平向两端对齐（主轴是横向才生效） */
  flexHsb: {
    justifyContent: 'space-between'
  },
  /* 父元素-横向换行 */
  flexHw: {
    flexWrap: 'wrap',
    fontSize: 0
  },
  /* 父元素-纵向排列（主轴） */
  flexV: {
    display: 'flex',
    flexDirection: 'column'
  },
  /* 父元素-竖直向行起始位置对齐（主轴是横向才生效） */
  flexVs: {
    alignItems: 'flex-start'
  },
  /* 父元素-竖直居中（主轴是横向才生效） */
  flexVc: {
    alignItems: 'center'
  },
  /* 父元素-竖直向行起始位置对齐（主轴是横向才生效） */
  flexVe: {
    alignItems: 'flex-end'
  },
  /* 父元素-纵向换行 */
  flexVw: {
    flexWrap: 'wrap',
    fontSize: 0
  },
  flexVb: {
    alignItems: 'baseline'
  }
})

export default flexStyle